<template>
	<view>
		<scroll-view class="scroll-view_H bg-white" scroll-x="true">
			<view class="scroll-view-item_H" v-for="(item,index) in tab" :key="index" :class="tabIndex==index ?'check':''" @click="checkOne(index)">
				{{item}}
			</view>
		</scroll-view>
		
		<scroll-view class="scroll_right bz p-2" scroll-y="true">
			
			<view class="wrap">
				<view class="wrap_list bz p-2 d-flex flex-nowrap bg-white mb-2 b-radius2 a-center" v-for="(item,index) in 10" :key="index" @click="navTo('/pages/shop/store/store')">
					<image src="/static/2.png" class="img" mode=""></image>
					<view class="flex-1 px-2">
						<view class="title">三元里宏泰大厦店</view>
						<view class="address my-1">广州市白云区三元里大道270号</view>
						<view class="address">营业时间: 09:00-21:00</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				height:'',
				tabIndex:0,
				tab:['全部','中医理疗','体质调养','产后康复','体制药膳','推拿正骨']
			}
		},
		onLoad() {
			_this=this;
			uni.getSystemInfo({
				success: function (res) {
					console.log(res.windowHeight)
					_this.height=res.windowHeight
				}
			});
		},
		methods: {
			checkOne(e){
				this.tabIndex=e;
			},
			navTo(e){
				uni.navigateTo({
					url:e
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
.scroll-view_H {
	white-space: nowrap;
	width: 100%;
	box-sizing: border-box;
	padding: 20rpx;
}
		
.scroll-view-item_H {
	display: inline-block;
	font-size: 25rpx;
	color: #333;
	background-color: #f4f4f4;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
	border-radius: 25rpx;
	margin: 0 10rpx;
}
.check{
	background-color: rgb(202, 154, 77);
	    color: rgb(255, 255, 255);
}

.scroll_right{
	.header{
		height: 100rpx;
		line-height: 100rpx;
		.header_name{
			width: 50%;
			text-align: center;
			color: #CA9A4D;
			font-size: 30rpx;
			font-weight: bold;
		}
		.c_check{
			background: #D7B073;
			border-radius: 10rpx 0px 30rpx 0px;
			color: #fff;
		}
		.c_check1{
			background: #D7B073;
			border-radius: 0rpx 10rpx 0rpx 30rpx;
			color: #fff;
		}
	}
	.wrap_name{
		height: 80rpx;
		line-height: 80rpx;
		color: #2E4E7E;
		font-size: 33rpx;
		font-family: SourceHanSansCN;
		font-weight: bold;
		color: #2E4E7E;
	}
	.wrap_list{
		border-bottom: 1rpx solid #f8f8f8;
		.img{
			height: 160rpx;
			width: 160rpx;
			border-radius: 10rpx;
		}
		.title{
			height: 40rpx;
			line-height: 40rpx;
			font-size: 30rpx;
			font-family: SourceHanSansCN;
			font-weight: bold;
			color: #363636;
		}
		.address{
			font-size: 25rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #B2B2B2;
		}
		.price{
			font-size: 23rpx;
			font-family: SourceHanSansCN;
			font-weight: bold;
			color: #C52525;
		}
		.tag{
			font-size: 23rpx;
			font-family: SourceHanSansCN;
			font-weight: bold;
			color: #B2B2B2;
		}
		.btn{
			width: 90rpx;
			height: 40rpx;
			line-height: 40rpx;
			background: #2E4E7E;
			border-radius: 20rpx;
			font-size: 25rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
		}
	}
}


</style>
